<template>
    <div :style="{'height': wHeight+'px','background':'#2a3542'}">
        <vue-canvas-nest  style="z-index: 1;" :config="config"></vue-canvas-nest>
        <div class="login" :style="{'z-index':'1','padding-top':pTop+'px'}">
            <div class="login-title"><span>CHUNQIUMEIWENGUANLIXITONG</span> 春秋美文</div>
            <div class="login-note">chun qiu mei wen management system</div>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
                <el-form-item prop="username">
                    <el-input prefix-icon="fa fa-user-o" type="text" placeholder="管理员账号" v-model="ruleForm.username" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input prefix-icon="fa fa-unlock-alt" type="password" v-model="ruleForm.password" placeholder="管理员密码" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item prop="captcha">
                    <el-input prefix-icon="fa fa-image" v-model.number="ruleForm.captcha" placeholder="验证码" style="width: 230px"></el-input>
                    <img @click="refreshCaptcha" :src="captchaLink" alt="" style="height: 40px;float: right;cursor: pointer;border-radius: 4px">
                </el-form-item>
                <div class="login-captcha"><i class="fa fa-question-circle-o"></i> 看不清，点击验证码换一张</div>
                <el-form-item>
                    <el-button type="primary" style="width: 100%;" :loading="buttonLoading"
                               :disabled="formDisabled" @click="submitForm('ruleForm')">登 录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import vueCanvasNest from 'vue-canvas-nest';
    import {UserLogin,Captcha } from '../../utils/axios';
    export default {
        components: { vueCanvasNest },
        created(){
            if (this.$refs.ruleForm!==undefined) {
                this.$refs.ruleForm.resetFields();
            }
            this.getCaptcha();
            this.keyupSubmit();
        },
        data(){
            return {
                config : {color: '26,254,255', opacity: 1, zIndex: 0, count: 250},
                wHeight : document.documentElement.clientHeight,
                pTop : document.documentElement.clientHeight*0.25,
                buttonLoading : false,
                formDisabled : false,
                captchaLink: '',
                ruleForm: {
                    username: '',
                    password: '',
                    captcha: '',
                    captchaKey: ''
                },
                rules: {
                    username: [
                        { required: true, message: '请输入管理员账号', trigger: 'blur' },
                    ],
                    password: [
                        { required: true, message: '请输入管理员密码', trigger: 'blur' },
                    ],
                    captcha: [
                        { required: true, message: '请输入验证码', trigger: 'blur' },
                    ]
                }
            }
        },
        methods:{
            keyupSubmit(){
                document.onkeydown=(e)=>{
                    let _key=window.event.keyCode;
                    if(_key===13){
                        this.$refs['ruleForm'].validate((valid) => {
                            if (valid) {
                                this.buttonLoading = true;
                                this.formDisabled = true;
                                var formData = this.ruleForm;
                                UserLogin(formData).then((res) =>{
                                    this.buttonLoading = false;
                                    this.formDisabled = false;
                                    if(res.code){
                                        this.$message.error(res.msg);
                                    }else{
                                        this.$store.dispatch('userLogin',res.data).then(()=>{
                                            this.$message({
                                                message: '登录成功，页面即将跳转...',
                                                type: 'success',
                                                duration: '1000',
                                                onClose:() =>{
                                                    this.$router.push({name:'Main'});
                                                }
                                            });
                                        });
                                    }
                                });
                            } else {
                                return false;
                            }
                        });
                    }
                }
            },
            getCaptcha(){
                Captcha().then((response)=>{
                    this.captchaLink = response.data.captcha;
                    this.ruleForm.captchaKey = response.data.captchaKey;
                })
            },
            refreshCaptcha(){
                this.getCaptcha();
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.buttonLoading = true;
                        this.formDisabled = true;
                        var formData = this.ruleForm;
                        UserLogin(formData).then((res) =>{
                            this.buttonLoading = false;
                            this.formDisabled = false;
                            if(res.code){
                                this.$message.error(res.msg);
                            }else{
                                this.$store.dispatch('userLogin',res.data).then(()=>{
                                    this.$message({
                                        message: '登录成功，页面即将跳转...',
                                        type: 'success',
                                        duration: '1000',
                                        onClose:() =>{
                                            this.$router.push({name:'Main'});
                                        }
                                    });
                                });
                            }
                        });
                    } else {
                        return false;
                    }
                });
                this.buttonLoading = false;
                this.formDisabled = false;
            },
        }
    }
</script>
